import React,{Component} from 'react';
import {Breadcrumb,Input,Button,notification,Select} from 'antd';
import service from '../lib/service';
import './css/binomial.css';
const Option = Select.Option;
const angles = []

angles.push(<Option key={30}>30°</Option>)
angles.push(<Option key={60}>60°</Option>)

const colors=['red','blue','gray','black'];

const colorOptions = colors.map((color)=>{
    return <Option key={color}>{color}</Option>
})

class FractalTree extends Component{
    state={
        length:0,
        angle:30,
        deep:0,
        color:'red',
        lines:[]
    }

    handleDraw(){
        let lines = this.state.lines;
        let color = this.state.color;
        if(this.state.lines.length === 0) return; 
        let cdx = document.getElementById('result');
        let context = cdx.getContext('2d');
        context.strokeStyle = color;
        // context.clear();
        lines.forEach((l)=>{
            context.moveTo(Math.floor(l.x1),Math.floor(l.y1));
            context.lineTo(Math.floor(l.x2),Math.floor(l.y2));
           
        }) 
        context.stroke();
    }
    

    handleCalculation(){
        // console.log(1)
        if (this.state.length === '0' || this.state.deep === '0' || this.state.deep === 0){
            notification.warning({
                key: '参数错误',
                message: '很抱歉',
                description: '请检查您的输入的参数是否正确..'
            });
            return ;
        }
        let params = {x1:150,y1:50,x2:150,y2:this.state.length + 50,
            angle:this.state.angle,
            length:this.state.length,
            deep:this.state.deep};

        service.fractalTree(params).then((res)=>{
            notification.success({
                key: '计算成功',
                message: '结果已计算完毕',
                description: '请查看..'
            });
            this.setState({lines:res.data});
            this.handleDraw();
        }).catch((res)=>{
            console.log(res);
            // notification.error({
            //     key: 'error',
            //     message: '计算错误',
            //     description: res
            // });
        })
    }

    setAngle=(e)=>{
        let angle  = parseInt(e,0);
        this.setState({angle:angle});
    }

    setDeep=(e)=>{
        let deep = parseInt(e.target.value,0);
        this.setState({deep:deep});
    }

    setLength=(e)=>{
        let length = parseInt(e.target.value,0);
        this.setState({length:length});
    }

    setColor(e){
        this.setState({color:e})
    }

  
    render(){
        return(
            <div style={{ background: '#fff', padding: 24, minHeight: 663 ,border:"1px solid #ececec"}}>
              <Breadcrumb style={{ margin: '16px 0' }}>
                  <Breadcrumb.Item>递归算法</Breadcrumb.Item>
                  <Breadcrumb.Item>分形树</Breadcrumb.Item>
              </Breadcrumb>
              <div className="main">
                <div className="problem-describe">
                    <h1>问题描述</h1>
                    <p className="problem-describe-text">先垂直绘制一根线段，然后在线段长度的三分之一处和三分之二处分别以固定夹角绘制另外两根线段，长度分别为原线段的2/3. 如此反复，直至线段长度小于某个较小的值。其中，线条颜色以及长度，夹角（例如产生某个范围的随机数）都可以自行进行微调。如果树枝不够丰满，可以自行增设。</p>                   
                </div>
                <div className="problem-reflection">
                    <h1>算法分析</h1>
                    <p className="problem-describe-text">此题在设计阶段将每个线段抽象成一个类，递归计算时计算好起始点和终止点并存入数组中，渲染时遍历数组渲染即可，难点在于递归传入的夹角是有变化的</p>
                </div>
                <div className="problem-solution">
                    <h1>解决方案</h1>
                    <p className="problem-describe-text">输入测试值(重画请刷新再输入)</p>
                    <div className="calculation">
                        初始线段长度: <Input onChange={(e)=>this.setLength(e)} size="small" placeholder="输入长度值" />
                        深度: <Input onChange={(e)=>this.setDeep(e)} size="small" placeholder="输入深度" />
                        角度: <Select defaultValue="30" onChange={(e)=>this.setAngle(e)} style={{ width:200}}>{angles}</Select>  
                        颜色: <Select defaultValue="red" onChange={(e)=> this.setColor(e)} style={{width:200}}>{colorOptions}</Select>
                        <Button style={{marginLeft:'20px'}} onClick={this.handleCalculation.bind(this)}>计算结果</Button>
                    </div> 
                    <div className="result">
                        <canvas id="result" className="result-canv"></canvas>
                    </div>
                </div>
              </div>
            </div>
        )
    }
}


export default FractalTree;